<template>
	<div class="view-card-list">
		
		<header-bar title="快钱支付">
			<a class="back" @click="onBackClick"></a>
		</header-bar>

		<div class="body">
			
			<div class="inner">
				<panel class="list">
					<panel-item key={index} v-for="(i,index) of cardlist" :bind="()=>{onChoose(index,i)}">
						<label>{{i.issuer}} 尾号{{i.storablePan}}</label>
						<i :class="{active:choose===index}"></i>
					</panel-item>
				</panel>

				<panel class="new">
					<panel-item :bind="onNewCard" class="point">
						<label>使用新信用卡支付</label>
					</panel-item>
				</panel>

				<div class="button" v-show="cardlist.length>0">
					<btn :onClick="onSubmitClick">下一步</btn>
				</div>
			</div>

			<small class="tips">凹凸共享租车服务热线<a href="tel:4006680202">400-668-0202</a></small>

		</div>

	</div>
</template>

<script>
import headerBar from '@/components/header'
import btn from '@/components/btn'
import panel from '@/components/panel'
import panelItem from '@/components/panelItem'
import loading from '@/components/loading'
import toast from '@/components/toast'
import alert from '@/components/alert'
import $http from '@/assets/http'
import {getMobile} from '@/assets/token'

export default {
	async created() {
		loading.show()

		try {
			// 检查订单状态，如果异常则返回
			const {data:tn} = await this.fetchTn()
			if (tn.resCode !== '000000') {
				toast.show(tn.resMsg)
				this.$router.back()
				loading.hide()
				return
			}

			// 获取卡列表信息
			const {data:res} = await this.fetchData()

			if (res.resCode === '000000') {
				this.cardlist = res.data.cardBind
				this.chooseInfo = this.cardlist[0]
			} else {
				toast.show(res.resMsg)
			}

		} catch(e) {
            if (e.response.data.errorMsg) {
                toast.show(e.response.data.errorMsg)
                this.$router.back()
            } else {
                alert.show('系统错误，请稍后再试')
            }
		}

		loading.hide()
	},
	data() {
		return {
			cardlist: [],
			choose: 0,
			chooseInfo: {}
		}
	},
	methods: {
		fetchData() {
			const mobile = getMobile()
			const {id} = this.$route.params
			return $http.request({
				method: 'post',
	            url: `/ins/bill99/pciQuery`,
	            data: {
	            	mobile,
	            	orderNo: id,
	            	source: 11,
	            }
			})
		},
		fetchTn() {
			const mobile = getMobile()
			const {id} = this.$route.params
			return $http.request({
				method: 'post',
	            url: `/ins/bill99/getTransTn`,
	            data: {
	            	mobile,
	            	orderNo: id,
	            	source: 11,
	            	payKind: 6,
	            }
			})
		},
		onChoose(id, res) {
			this.choose = id
			this.chooseInfo = res
		},
		onBackClick() {
			this.$router.back()
		},
		onSubmitClick() {
			const {id, amount} = this.$route.params
			this.$router.push(`/payment/confirm/${id}/${amount}/${this.chooseInfo.phoneNO}`)
		},
		onNewCard() {
			const {id, amount} = this.$route.params
			this.$router.push(`/payment/new/${id}/${amount}`)
		}
	},
	components: {
		btn,
		panel,
		panelItem,
		headerBar,
	}
}
</script>

<style scoped lang="scss">
	@import './style'
</style>